$(function () {
    //获取页面id
    var machineId = T.p("machineId");
    console.log("获取机器id:" + machineId);
    vm.p.machineId=machineId;
    var pageNum = T.p("pageNum");
    console.log("pageNum:" + pageNum);
    vm.p.pageNum=pageNum;

    //初始化时间
    var initStartTime = moment().startOf('day');
    vm.initDatePicker(initStartTime);
    vm.q.time = initStartTime.format('YYYY-MM-DD');

    vm.getColModel(machineId);
    console.log("q:"+JSON.stringify(vm.q));
});

var vm = new Vue({

    el: '#rrapp',
    data: {
        q: {
            // status: "",
            time:""
        },
        p: {
            machineId: null,
            pageNum: null
        },
        caption: null,
        colModel: [],
        showList: true,
        title: null,
        xList:[],
        valueList:[]
    },
    methods: {
        query: function () {
            vm.reload();
        },
        reload: function (event) {
            vm.showList = true;
            var page = $("#jqGrid").jqGrid('getGridParam', 'page');
            $("#jqGrid").jqGrid('setGridParam', {
                postData: {
                    // 'status': vm.q.status,
                    'time': vm.q.time
                },
                page: page
            }).trigger("reloadGrid");
        },
        getColModel: function (machineId) {
            $.get("/machine/info/workRecord/getColNamesAndModel/" + machineId, function (r) {
                if (r.code === 0) {
                    var jqGridEntity = r.jqGridEntity;
                    vm.colModel = jqGridEntity.colModelEntity;
                    vm.caption = jqGridEntity.machineEntity.name;
                    vm.initJqGridData(machineId);

                } else {
                    alert(r.msg);
                }
            });


        },
        initDatePicker: function (start) {
            $('#datetimes').daterangepicker({
                "singleDatePicker": true,
                "showDropdowns": true,
                // "linkedCalendars": false,
                // "showCustomRangeLabel": false,
                "startDate": start,
                "opens": "left",
                "locale": {
                    "format": "YYYY-MM-DD",
                    "applyLabel": '确定',
                    "cancelLabel": '取消',
                    "daysOfWeek": ['日', '一', '二', '三', '四', '五', '六'],
                    "monthNames": ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                    "firstDay": 1
                }
            }, function (start, end, label) {
                console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
                vm.q.time = end.format('YYYY-MM-DD');
                console.log("vm中的q:" + JSON.stringify(vm.q));
            });
        },
        initJqGridData: function (machineId) {
            $("#jqGrid").jqGrid({
                url: baseURL + 'machine/info/workRecord/list',
                datatype: "json",
                mtype: "GET",
                postData: {
                    "machineId": machineId,
                    "time": vm.q.time
                },
                caption: vm.caption + "-工作记录列表",
                colModel: vm.colModel,
                viewrecords: true,
                height: '100%',
                rowNum: 30,
                rowList: [30, 50],
                rownumbers: true,
                rownumWidth: 50, //设置显示序号的宽度，默认为25
                autowidth: true,
                sortname: "id", //默认的排序列。可以是列名称或者是一个数字，这个参数会被提交到后台
                sortorder: "desc",
                pager: "#jqGridPager",
                jsonReader: {
                    root: "page.list",
                    page: "page.currPage",
                    total: "page.totalPage",
                    records: "page.totalCount"
                },
                prmNames: {
                    page: "page",
                    rows: "limit",
                    order: "order"
                },
                gridComplete: function () {
                    //隐藏grid底部滚动条
                    $("#jqGrid").closest(".ui-jqgrid-bdiv").css({"overflow-x": "hidden"});
                },
                loadComplete: function (xhr) {
                    if (xhr.code != 0) {
                        alert(xhr.msg);
                    } else {
                        // vm.analyzeData = xhr.analyzeData[0];
                        console.log("xhr:" + JSON.stringify(xhr));
                        // console.log("analyzeData:" + JSON.stringify(vm.analyzeData));

                        // 基于准备好的dom，初始化echarts实例
                        var myChart1 = echarts.init(document.getElementById('charts1'));
                        // myChart1.resize();
                        // var myChart2 = echarts.init(document.getElementById('charts2'));
                        vm.xList = xhr.xList;
                        vm.valueList = xhr.valueList;

                        option = {
                            title: {
                                text: "机器工作记录",
                                left: "center"
                            },
                            xAxis: {
                                type: 'category',
                                data: xhr.xList,
                                name: "时间",
                                asisTick :{
                                    internal: 0
                                }
                            },
                            yAxis: {
                                type: 'value',
                                name: "个数"
                            },

                            series: [{
                                data: xhr.valueList,
                                type: 'bar',
                                showBackground: true,
                                backgroundStyle: {
                                    color: 'rgba(220, 220, 220, 0.8)'
                                },
                                label: {
                                    show: true, // 开启显示
                                    position: 'top', // 在上方显示
                                    distance: 10, // 距离图形元素的距离。当 position 为字符描述值（如 'top'、'insideRight'）时候有效。
                                    verticalAlign: 'middle',
                                    textStyle: { // 数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }]
                        };




                        // 使用刚指定的配置项和数据显示图表。
                        myChart1.setOption(option);
                        // myChart2.setOption(option2);
                    }
                }
            });
        },
        goBack: function () {
            console.log("返回机器列表")
            window.location.href = 'machine.html?machineId='+vm.p.machineId+'&pageNum='+vm.p.pageNum+'';
        }
    }
});